<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>product_list</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/layui-v2.5.6/layui/css/layui.css" media="all">
</head>
<body>
	<table class="layui-hide" id="test" lay-filter="test"></table>
 
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <a class="layui-btn layui-btn-sm" href="/index/add_product.html" target="body_show">添加商品信息</a>
		  </div>
		</script>
		 
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" href="/index/edit_product.html" target="body_show">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		     
		<!--显示图片内容-->
<script type="text/html" id="image">
    <img src='../image/strawberry.jpg' style="width: 150px;height: 20px">
</script>
		<!--显示是否上架-->
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" value="{{d.id}}" name="shelf" lay-skin="switch" lay-text="是|否">
</script>         
		          
		<script src="/static/layui-v2.5.6/layui/layui.js" charset="UTF-8"></script>

		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
		 
		<script>
		layui.use('table', function(){
		  var table = layui.table;
		  
		  table.render({
		    elem: '#test'
		    ,url:'/test/table/test.json'
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
		      title: '提示'
		      ,layEvent: 'LAYTABLE_TIPS'
		      ,icon: 'layui-icon-tips'
		    }]
		    ,title: '商品数据表'
		    ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: '商品ID', width: 100, fixed: 'left', unresize: true, sort: true}
                , {field: 'name', title: '商品名称', width: 120,  }
                , {field: 'imags', title: '商品图片', width: 130,templet:'#image',unresize:true}
                , {field: 'classify', title: '商品分类', width: 100, edit: 'text'}
                , {field: 'sellprice', title: '销售价格', width: 100, edit: 'text', sort: true}
                , {field:'sign', title:'商品简介', width: 100, edit: 'text'}
                , {field: 'trade', title: '商品库存', width: 100, sort: true, edit: 'text'}
                , {field: 'salesvolume', title: '销售数量', width: 120, edit: 'text'}
                , {field: 'shelf', title: '是否上架', width: 100, templet:'#checkboxTpl',unresize:true}
                , {field: 'time', title: '上架时间', width: 120, edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
		    ]]
		    ,page: true
		  });
		  
		  //头工具栏事件
		  /*table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'getCheckData':
		        var data = checkStatus.data;
		        layer.alert(JSON.stringify(data));
		      break;
		      case 'getCheckLength':
		        var data = checkStatus.data;
		        layer.msg('选中了：'+ data.length + ' 个');
		      break;
		      case 'isAll':
		        layer.msg(checkStatus.isAll ? '全选': '未全选');
		      break;
		      
		      //自定义头工具栏右侧图标 - 提示
		      case 'LAYTABLE_TIPS':
		        layer.alert('这是工具栏右侧自定义的一个图标按钮');
		      break;
		    };
		  });*/
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		      layer.prompt({
		        formType: 2
		        ,value1: data.username,
		        value2: data.email

		      }, function(value1, value2, index){
		        obj.update({
		          username: value1,
		          email:value2
		        });
		        layer.close(index);
		      });
		    }
		  });
		});
		</script>		
</body>
</html>